<template>
    <div>
        <div class="m-alert" style="align-items: center;">
            <span class="el-icon-info" style="align-items: center;"></span>
            <div>
                <div>管理员可根据不同部门的选择展示不同的标签组，部门管理员可创建部门可见的标签</div>
            </div>
        </div>

        <div class="interspaceH"></div>

        <el-form :model="tagGroupForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="标签组名称">
                <el-input type="text" v-model="tagGroupForm.tagsGroupName" size="small" maxlength="15"
                          show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="可见范围">
                <el-radio-group v-model="tagGroupForm.visibleRange" size="small">
                    <el-radio label="0">全部员工</el-radio>
                    <el-radio label="1">部门可见</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item v-if="tagGroupForm.visibleRange == '1'" label="选择可见部门">
                <el-input placeholder="请输入选择部门" v-model="tagGroupForm.dept.deptName">
                    <el-button slot="append" type="primary" style="background-color: #409EFF; color: #fff" @click="selectVisible = true">
                        选择
                    </el-button>
                </el-input>
            </el-form-item>

            <el-form-item label="标签名称">
                <el-input type="text" v-model="tagGroupForm.clientTagsName" size="small" maxlength="15"
                          show-word-limit></el-input>
            </el-form-item>
        </el-form>

        <el-dialog title="选择成员" :visible.sync="selectVisible" width="40%" :close-on-click-modal="false" :destroy-on-close="true" append-to-body>
            <ListSelect @getData="getData" :listFields="fileList" :dataSource="deptData"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="selectVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import ListSelect from "@/components/list_select/list_select"

export default {
    name: "client_create_group_tag",
    components: {
        ListSelect
    },
    data() {
        return {
            selectVisible: false,
            tagGroupForm: {
                tagsGroupName: "",
                visibleRange: "0",
                clientTagsName: "",
                tagsGroupType: "1",
                dept: {
                    deptName: "",
                }
            },
            fileList: {
                deptName: "部门"
            },
            deptData: []
        }
    },
    mounted() {
        this.$request("/api/emp/getDeptList/1_0", {}, "POST").then((data) => {
          this.deptData = data.rows
        })
    },
    methods: {
        getData(data) {
            this.tagGroupForm['dept'] = data
            this.selectVisible = false
        },
        getFormData() {
            let payload = this.tagGroupForm
            payload['deptId'] = payload['dept']['deptId']
            return payload
        },
        resetFormData() {
            this.tagGroupForm = {
                tagsGroupName: "",
                    visibleRange: "0",
                    clientTagsName: "",
                    tagsGroupType: "1",
                    dept: {
                    deptName: "",
                }
            }
        }
    }
}
</script>

<style scoped>
.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>
